<template>
  <div id="id">
    <div class="container">
      <div class="row clearfix">
        <div class="col-md-12 column">

          <!-- 页头end-->
          <!--网站介绍start -->
          <div class="jumbotron">
            <h1>
              Hello, 欢迎入站!
            </h1>
            <p>
              一帮致力于服务的石职小哥哥和小姐姐还有一个帅气的大叔，共同打造此站，本站欢迎大家访问，也希望能得到大家的意见与认可...
            </p>
            <!-- <p>
              <a class="btn btn-large" href="#" id="LearnMore1">热烈</a>
              <a class="btn btn-large" href="#" id="LearnMore2">欢迎</a>
            </p> -->
          </div>
          <!-- 网站介绍end -->
          <!-- 广告区域start -->
          <div class="row" id="Hotspot">
            <div class="col-md-4">
              <div class="thumbnail" >
                <img style="max-width: 100%;height:auto;" class="" src="../../static/img/default4.jpg"/>
                <div class="caption">
                  <h3>
                    纽约地铁上的故事
                  </h3>
                  <p>
                    纽约地铁上的故事 Stories on the New York Subway
                    说起纽约地铁，那可满载了NYC人民的爱恨情仇。23条线路每天24小时、每周7天、每年365天，串联起纽约市425座车站。作为全球历史最久、规模最大的地铁系统之一，纽约地铁一年的载客量超过17亿次。...
                  </p>
                  <p>
                    <router-link  class="hotA" to="/content">点击查看</router-link > <a class="hotB" href="javascript:;">浏览次数（9999）</a>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="thumbnail" >
                <img style="max-width: 100%;height:auto;"  src="../../static/img/default5.jpg" />
                <div class="caption">
                  <h3>
                    上海中心大厦
                  </h3>
                  <p>
                    上海中心大厦（Shanghai
                    Tower），是中华人民共和国上海市的一座巨型高层地标式摩天大楼，其设计高度超过附近的上海环球金融中心。上海中心大厦项目面积433954平方米，建筑主体为119层，总高为632米，结构高度为580米，机动车停车位布置在...
                  </p>
                  <p>
                    <router-link class="hotA" to="/content">点击查看</router-link > <a class="hotB" href="javascript:;">浏览次数（9985761）</a >
                  </p>
                </div>
              </div>
            </div>
            <div class="col-md-4">
              <div class="thumbnail" >
                <img style="max-width: 100%;height:auto;" src="../../static/img/default6.jpg" />
                <div class="caption">
                  <h3>
                    夕阳的美丽
                  </h3>
                  <p>
                    夕阳，

                    是一天中太阳落下的时候，
                    夕阳，
                    总是给人以迟暮之感。
                    《乐游原》唐·李商隐向晚意不适，驱车登古原。夕阳无限好，只是近黄昏。
                    夕阳，是一天的结束，“日薄西山，气息奄奄”是夕阳的写照，夕阳带来的总是结束与...
                  </p>
                  <p>
                    <router-link  class="hotA" to="/content">点击查看</router-link > <a class="hotB" href="javascript:;">浏览次数（563942）</a >
                  </p>
                </div>
              </div>
            </div>
          </div>
          <!-- 广告区域end -->
          <!-- 标签start -->
          <div class="row clearfix">
            <!-- 这个地方暂时不要了 -->
          </div>
          <!-- 标签end -->
          <!-- 文章预览start -->
          <div class="row clearfix">

            <div class="col column" style="width: 90%;" id="img">
              <!-- 最热  最新end -->
              <div class="row clearfix" style="margin: 20px 0;">
                <div class="col column">
                  <div class="row clearfix">
                    <div class="col-md-6 column" style="width: 25%;padding-right: 0;display: inline-block;">
                      <button id="newbutton" @click="getnewarticle(0)">
                        <h3>
                          最新文章
                        </h3>
                      </button>
                      <div id="new1" style="height: 3px;width: 113px;background-color: rgb(121,121,121);"></div>
                    </div>
                    <div class="col-md-6 column" style="width: 25%;padding-right: 0;display: inline-block;" @click="gethotarticle(0)">
                      <button id="hotbutton">
                        <h3>
                          最热文章
                        </h3>
                      </button>
                      <div id="hot2" style="height: 3px;width: 113px;background-color: rgb(121,121,121);display: none;"></div>
                    </div>
                  </div>
                </div>
                <div class="col-md-4 column">
                  <!-- 可以在后面选择加东西    不加也没事 -->
                </div>
              </div>
              <!-- 最热  最新end -->

              <!-- 文章摘要信息start -->
              <div class="yinying" v-for="item in articlelist">
                <div class="row clearfix">
                  <div class="col-md-2 column">
                    <img alt="140x140" src="../../static/img/default3.jpg" />
                  </div>
                  <div class="col-md-10 column">
                    <dl>
                      <dt>
                        <h3>
                          <span>{{item.articleTitle}}</span>
                        </h3>
                      </dt>
                      <dd>
                        <p>
                          {{item.articleRead}}
                        </p>
                      </dd>
                    </dl>
                  </div>
                </div>
                <div class="row clearfix">
                  <div class="col-md-4 column">
                    <div class="row clearfix">
                      <div class="col-md-6 column">
                        <p>
                          网名：{{item.userName}}
                        </p>
                      </div>
                      <div class="col-md-6 column">
                        <p>
                          文章时间：{{item.articleTime}}
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 column">
                    <div class="row clearfix">
                      <div class="col-md-4 column">
                        <p>
                          赞（{{item.articleLike}}）
                        </p>
                      </div>
                      <div class="col-md-4 column">
                        <p>
                          评论（{{item.articleCommentCounts}}）
                        </p>
                      </div>
                      <div class="col-md-4 column">
                        <p>
                          标签（{{item.articleLable}})
                        </p>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4 column">
                    <div class="row clearfix">
                      <div class="col-md-6 column">
                      </div>
                      <div class="col-md-6 column" style="color: blue;">
                        <a  class="hotA" @click="articlePreview(item.articleId)">
                          阅读更多...
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 文章宅摘要信息end -->

              <!-- 分页码 -->
              <ul class="pagination pagination-lg" style="float: right;font-size: 1.5rem">

                <li>
                  <a href="javascript:;" id="pagered" v-for="item in pagebeforeout" @click="newhot(item-1)">
                    ({{item}})<span v-for="item2 in pagebefore" v-if="item2==item">..♥..</span>
                  </a>
                </li>

              </ul>
              <br>
              <span style="font-size:1.2rem;">当前页数：{{pageindex+1}}</span>
              <!-- 分页码 -->
            </div>
          </div>
          <!-- 文章预览end -->
          <!-- 底部备案信息start -->
          <div class="row clearfix" style="background-color: #eee">
            <div class="col-md-12 column">
              <div class="row clearfix">
                <div class="col-md-4 column">
                </div>
                <div class="col-md-4 column">
                  <dl>
                    <dt>
                      Copyright © 2018 - 2020 wenyuanblog.com All Rights Reserved.
                    </dt>
                    <dd>
                      All content is made available under the CC BY-NC 4.0 <br>河北省公关备案
                    </dd>
                    <dt>
                      联系我们/ 赞助本站 / 广告合作
                    </dt>
                    <dt>
                      使用说明 / 友情链接 / 关注微信
                    </dt>

                  </dl>
                </div>
                <div class="col-md-4 column">
                </div>
              </div>
            </div>
          </div>
          <!-- 底部备案信息end -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'
  //vue部分
  export default {
    name: "index",
    data(){
      return{
        //文章摘要信息
        articlelist: '',
        //判断是最新还是最热 0最新（默认）  1最热
        newhots : 0,
        //每页数量
        pagesize : '20',
        //当前页数
        pageindex : 0,
        //总共页数
        pagecount : 0,
        //当前页数的前页后页
        pagebeforeout : [],
        //当前页数的...数组
        pagebefore : [],
      }
    },
    methods:{
      //跳转到文章详情页面
      articlePreview:function (id){
        // window.open("/content?id="+id);
        this.$router.push({path:"/content/"+ id} );
      },
      //判断是最新还是最热的方法(0最新 ， 1最热)
      newhot:function (pageindex){
        let than=this;
        if (than.newhots == 0){
          than.getnewarticle(pageindex);
        }
        if (than.newhots == 1){
          than.gethotarticle(pageindex);
        }
      },
      //分页算法(传入当前页数和总共页数)
      page:function (pageindex,pagecount){
        let than=this;
        //判断总共有多少页，后端传过来的总页数  如果小于6就直接循环六次
        if (pagecount < 6){
          than.pagebeforeout = pagecount;
        }else{
          //如果大于6，那么需要判断，显示的分页数和隐藏的分页数都有哪些
          //默认是下面的六个
          than.pagebeforeout.push(1);
          than.pagebeforeout.push(2);
          than.pagebeforeout.push(3);
          than.pagebeforeout.push(pagecount-2);
          than.pagebeforeout.push(pagecount-1);
          than.pagebeforeout.push(pagecount);
          //先不考虑重复，如果当前页数满足下面的条件，就添加到数组中  也就是前两页，当前页，后两页
          if (pageindex>1 && pageindex+2<pagecount){
            than.pagebeforeout.push(pageindex-1);
            than.pagebeforeout.push(pageindex);
            than.pagebeforeout.push(pageindex+1);
            than.pagebeforeout.push(pageindex+2);
            than.pagebeforeout.push(pageindex+3);
          }
        }
        //这时候要给数组去重
        for (let i = 0; i < than.pagebeforeout.length - 1; i++) {
          // 每一次拿出来要和后面依次比较的那一项
          let item = than.pagebeforeout[i];
          //====里层循环控制和当前项后面的每一项逐一比较
          // let j = i + 1 从当前项的后一项开始逐一比较即可
          for (let j = i + 1; j < than.pagebeforeout.length; j++) {
            if (item === than.pagebeforeout[j]) {
              // 当前项和后面中的某一项相等了，此时我们把后面中的这一项从原始数组中删除掉
              than.pagebeforeout.splice(j, 1);

              j--; //=>删除完，先让j--，然后在j++，相当于没加没减，下一轮还是从当前索引开始比较，这样防止数组塌陷带来的问题
            }
          }
        }
        //然后对数组进行排序
        for(var i=0;i<than.pagebeforeout.length;i++){
          for(var j=0;j<than.pagebeforeout.length-i-1;j++){
            if(than.pagebeforeout[j]>than.pagebeforeout[j+1]){
              var temp=than.pagebeforeout[j];
              than.pagebeforeout[j]=than.pagebeforeout[j+1];
              than.pagebeforeout[j+1]=temp;
            }
          }
        }

        //判断前面的序号和后面的序号相差是否大于一（这里是加...的  如果前一页和后一页的分页数之差大于一，那么就将此页数字添加到另一个集合备用）
        //备用的数字，留到if判断，如果当前页和存放的数字相等，那么就在对应页数的html后面添加...
        for(var j=0;j<than.pagebeforeout.length;j++){
          if(than.pagebeforeout[j+1]-than.pagebeforeout[j]>1){
            var temp=than.pagebeforeout[j];
            than.pagebefore.push(temp);
          }
        }
      },



      //最新文章
      getnewarticle:function (pageindex){
        var val = 0;
        let than=this;
        than.newhots = 0;
        $("#new1").show();
        $("#newbutton").addClass("hotnew");
        $("#hotbutton").removeClass("hotnew");
        $('#hot2').hide();
        axios.get('http://localhost:9000/Home/dataUpArticle/'+pageindex)
          .then(function (data) {
            if (data.data.flag){
              than.pagebeforeout = [];
              than.pagebefore = [];
              than.pageindex = pageindex;
              //把后端返回的文章集合数据放到vue全局变量中
              than.articlelist=data.data.data;
              than.pagecount = Math.ceil(data.data.num/20);
              than.page(pageindex,than.pagecount);


            }else{
              console.log("查询失败！");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      },

      //最热文章
      gethotarticle:function (pageindex){
        var val = 0;
        let than=this;
        than.newhots = 0;
        $('#hot2').show();
        $("#hotbutton").addClass("hotnew");
        $("#newbutton").removeClass("hotnew");
        $('#new1').hide();
        axios.get('http://localhost:9000/Home/hotArticle/'+pageindex)
          .then(function (data) {
            console.log(data);
            if (data.data.flag){
              //把后端返回的文章集合数据放到vue全局变量中
              than.articlelist=data.data.data;
              than.pagecount = data.data.num;
              than.pagecount = Math.ceil(data.data.num/20);
              than.page(pageindex,than.pagecount);

            }else{
              console.log("查询失败！");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }

    },
    beforeMount:function() {
      let than=this;
      than.newhot(0);
      // than.getnewarticle(0);
    }
  }
</script>

<style scoped >

  #pagered:hover{
    color: red;
  }
  .btn:focus {
    outline: none !important;
    color: #000 !important;
  }
  a{
    text-decoration:none !important;
  }
  #Hotspot>div{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.349019607843137);
    border-radius: 25px;
  }
  #Hotspot>div:hover{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.649019607843137);
  }
  #Hotspot a:hover{
    color: #000;
  }
  .hotA{
    font-size: 16px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    background-color: rgb(51,122,183);
    border-radius: 6px;
    text-align: center;
  }
  .hotA:hover{
    color: yellow;
    text-decoration: none;
    cursor: pointer;
  }
  .hotB{
    color: #000;
    float: right;
    width: 100px;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    text-decoration: none;
  }
  .hotB:hover{
    text-decoration: none;
  }
  #LearnMore1{
    width: 8.4rem;line-height: 8.4rem;
  }
  #LearnMore1:hover{
    background-color: #000 !important;
    color: #fff;
  }
  #LearnMore2{
    width: 8.4rem;line-height: 8.4rem;
    float: right;
  }
  #LearnMore2:hover{
    background-color: #000 !important;
    color: #fff;
  }
  #biaoqian>div>div{
    width: 20%;
    margin-bottom: 20px;
    display: inline-block;
  }
  .yinying>div>div>img{
    width: 150px;
    height: 150px;
  }
  #img>div>div>div>div>button{
    background-color: #fff;
    border: 1px solid transparent;
    outline: none;
  }
  #img>div>div>div>div>button:hover{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.349019607843137);
    border-radius: 25px;
  }
  .hotnew{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.349019607843137);
    border-radius: 25px;
  }
  .yinying:hover{
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.349019607843137);
    border-radius: 25px;
  }
  .yinying h4:hover{
    cursor:pointer;
  }
  .yinying h4{
    width: 120px;
    height: 30px;
    background-color: rgba(255,102,0,0.5);
    text-align: center;
    line-height: 30px;
    color: white;
  }
  .btn:focus{
    outline: none !important;
    color: #000 !important;
  }
  .btn:active{
    outline: none !important;
    color: #000 !important;
  }


  .btn-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .btn {
    width: 6.4rem;
    line-height: 6.4rem;
    background: #fff !important;
    border-radius: 50%;
    text-align: center;
    margin: 1.6rem;
    font-size: 2rem;
    border: none;
    padding: 0;
    position: relative;
    outline: none;
    color: #000;
  }

  .btn--shockwave.is-active {
    -webkit-animation: shockwaveJump 1s ease-out infinite;
    animation: shockwaveJump 1s ease-out infinite;
  }
  .btn--shockwave.is-active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    -webkit-animation: shockwave 1s .65s ease-out infinite;
    animation: shockwave 1s .65s ease-out infinite;
  }
  .btn--shockwave.is-active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    -webkit-animation: shockwave 1s .5s ease-out infinite;
    animation: shockwave 1s .5s ease-out infinite;
  }

  @-webkit-keyframes shockwaveJump {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    40% {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }
    50% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
    }
    55% {
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
    }
    60% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes shockwaveJump {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
    40% {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }
    50% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
    }
    55% {
      -webkit-transform: scale(1.02);
      transform: scale(1.02);
    }
    60% {
      -webkit-transform: scale(0.98);
      transform: scale(0.98);
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
  @-webkit-keyframes shockwave {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }
    95% {
      box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
    }
    100% {
      -webkit-transform: scale(2.25);
      transform: scale(2.25);
    }
  }
  @keyframes shockwave {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 0 1px rgba(0, 0, 0, 0.15);
    }
    95% {
      box-shadow: 0 0 50px transparent, inset 0 0 30px transparent;
    }
    100% {
      -webkit-transform: scale(2.25);
      transform: scale(2.25);
    }
  }
  .btn--jump.is-active {
    -webkit-animation: .4s jump ease infinite alternate;
    animation: .4s jump ease infinite alternate;
  }

  @-webkit-keyframes jump {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  }

  @keyframes jump {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
  }
  .btn--pulse.is-active {
    background: transparent;
  }
  .btn--pulse.is-active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: pulse 0.4s ease infinite alternate;
    animation: pulse 0.4s ease infinite alternate;
    z-index: -1;
  }

  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      border-radius: 50%;
    }
    100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      border-radius: 45%;
    }
  }

  @keyframes pulse {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      border-radius: 50%;
    }
    100% {
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
      border-radius: 45%;
    }
  }
  .btn--blink.is-active {
    background: transparent;
  }
  .btn--blink.is-active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: blink 1.33s ease-out infinite;
    animation: blink 1.33s ease-out infinite;
    z-index: -1;
  }

  @-webkit-keyframes blink {
    0% {
      opacity: 1;
    }
    20% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes blink {
    0% {
      opacity: 1;
    }
    20% {
      opacity: .5;
    }
    100% {
      opacity: 1;
    }
  }
  .btn--wiggle.is-active {
    -webkit-animation: 1s wiggle ease infinite;
    animation: 1s wiggle ease infinite;
  }

  @-webkit-keyframes wiggle {
    0% {
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }
    20% {
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
    }
    40% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
    60% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    90% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }
  }

  @keyframes wiggle {
    0% {
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }
    20% {
      -webkit-transform: rotate(20deg);
      transform: rotate(20deg);
    }
    40% {
      -webkit-transform: rotate(-15deg);
      transform: rotate(-15deg);
    }
    60% {
      -webkit-transform: rotate(5deg);
      transform: rotate(5deg);
    }
    90% {
      -webkit-transform: rotate(-1deg);
      transform: rotate(-1deg);
    }
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
    }
  }
  .btn--wut.is-active {
    -webkit-animation: 1s fullRotation ease infinite;
    animation: 1s fullRotation ease infinite;
  }
  .btn--wut.is-active:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: wutBefore 0.8s .4s ease-out infinite;
    animation: wutBefore 0.8s .4s ease-out infinite;
    z-index: -1;
  }
  .btn--wut.is-active:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: wut 0.8s ease-out infinite;
    animation: wut 0.8s ease-out infinite;
    z-index: -1;
  }

  @-webkit-keyframes fullRotation {
    0% {
      -webkit-transform: rotate(-3deg) scale(1) translate3d(0, 0, 0);
      transform: rotate(-3deg) scale(1) translate3d(0, 0, 0);
    }
    20% {
      -webkit-transform: rotate(50deg) translate3d(0, 5px, 0);
      transform: rotate(50deg) translate3d(0, 5px, 0);
    }
    40% {
      -webkit-transform: rotate(-15deg) scale(1.1) translate3d(0, 8px, -5px);
      transform: rotate(-15deg) scale(1.1) translate3d(0, 8px, -5px);
    }
    60% {
      -webkit-transform: rotate(5deg) translate3d(5px, -8px, -80px);
      transform: rotate(5deg) translate3d(5px, -8px, -80px);
    }
    90% {
      -webkit-transform: rotate(-1deg) translate3d(0, 0, 0);
      transform: rotate(-1deg) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }

  @keyframes fullRotation {
    0% {
      -webkit-transform: rotate(-3deg) scale(1) translate3d(0, 0, 0);
      transform: rotate(-3deg) scale(1) translate3d(0, 0, 0);
    }
    20% {
      -webkit-transform: rotate(50deg) translate3d(0, 5px, 0);
      transform: rotate(50deg) translate3d(0, 5px, 0);
    }
    40% {
      -webkit-transform: rotate(-15deg) scale(1.1) translate3d(0, 8px, -5px);
      transform: rotate(-15deg) scale(1.1) translate3d(0, 8px, -5px);
    }
    60% {
      -webkit-transform: rotate(5deg) translate3d(5px, -8px, -80px);
      transform: rotate(5deg) translate3d(5px, -8px, -80px);
    }
    90% {
      -webkit-transform: rotate(-1deg) translate3d(0, 0, 0);
      transform: rotate(-1deg) translate3d(0, 0, 0);
    }
    100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
    }
  }
  @-webkit-keyframes wut {
    0% {
      border-radius: 50%;
      -webkit-transform: skew(0) translate3d(0, 0px, 0px);
      transform: skew(0) translate3d(0, 0px, 0px);
    }
    10% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    50% {
      border-radius: 50%;
    }
    80% {
      border-radius: 30%;
      -webkit-transform: translate3d(20, 10px, 20px);
      transform: translate3d(20, 10px, 20px);
    }
    100% {
      border-radius: 50%;
      -webkit-transform: skew(0) translate3d(0, 0px, 0px);
      transform: skew(0) translate3d(0, 0px, 0px);
    }
  }
  @keyframes wut {
    0% {
      border-radius: 50%;
      -webkit-transform: skew(0) translate3d(0, 0px, 0px);
      transform: skew(0) translate3d(0, 0px, 0px);
    }
    10% {
      -webkit-transform: translate3d(0, -10px, 0);
      transform: translate3d(0, -10px, 0);
    }
    50% {
      border-radius: 50%;
    }
    80% {
      border-radius: 30%;
      -webkit-transform: translate3d(20, 10px, 20px);
      transform: translate3d(20, 10px, 20px);
    }
    100% {
      border-radius: 50%;
      -webkit-transform: skew(0) translate3d(0, 0px, 0px);
      transform: skew(0) translate3d(0, 0px, 0px);
    }
  }
  @-webkit-keyframes wutBefore {
    0% {
      border-radius: 50%;
      -webkit-transform: translate3d(0, 0px, 0px);
      transform: translate3d(0, 0px, 0px);
    }
    10% {
      -webkit-transform: translate3d(-10px, 10px, 0);
      transform: translate3d(-10px, 10px, 0);
    }
    70% {
      border-radius: 50%;
    }
    80% {
      border-radius: 30%;
      -webkit-transform: translate3d(-20px, -10px, -20px);
      transform: translate3d(-20px, -10px, -20px);
    }
    100% {
      border-radius: 50%;
      -webkit-transform: translate3d(0, 0px, 0px);
      transform: translate3d(0, 0px, 0px);
    }
  }
  @keyframes wutBefore {
    0% {
      border-radius: 50%;
      -webkit-transform: translate3d(0, 0px, 0px);
      transform: translate3d(0, 0px, 0px);
    }
    10% {
      -webkit-transform: translate3d(-10px, 10px, 0);
      transform: translate3d(-10px, 10px, 0);
    }
    70% {
      border-radius: 50%;
    }
    80% {
      border-radius: 30%;
      -webkit-transform: translate3d(-20px, -10px, -20px);
      transform: translate3d(-20px, -10px, -20px);
    }
    100% {
      border-radius: 50%;
      -webkit-transform: translate3d(0, 0px, 0px);
      transform: translate3d(0, 0px, 0px);
    }
  }

</style>
